<template>
  <Dialog ref="DialogRef" :appDialog="appDialog" :close-on-click-modal="false">
    <div class="content">
      <span>二维码类型</span>
      <el-radio-group v-model="radio">
        <el-radio :label="1">素材中心</el-radio>
        <el-radio :label="2">营销活动</el-radio>
      </el-radio-group>
    </div>
  </Dialog>
  <BaseDialog ref="BaseDialogRef" @save="dialogSaveFun" :singleImage="true" />
  <MarketingBox ref="MarketingBoxRef" @save="marketSaveFun" @close="cancelHandel" />
</template>


<script setup lang="ts">
import BaseDialog from '../../../friendcirclemat/components/BaseDialog.vue'
import MarketingBox from './MarketingBox.vue'
import Dialog from '@/components/Dialog.vue'
import { ref, warn, watch } from 'vue'

const radio = ref(1)
const DialogRef = ref(null)
const BaseDialogRef = ref(null)
const MarketingBoxRef = ref(null)
const emit = defineEmits(['submit', 'close'])

// 打开上传素材的弹框
const openBase = (type: string) => {
  BaseDialogRef.value.showDialog('image', [], null)
}
const submitHandel = () => {
  if (radio.value == 1) {
    openBase()
    return
  }
  appDialog.value.visible = false
  MarketingBoxRef.value.appDialog.visible = true
}
const cancelHandel = () => {
  appDialog.value.visible = false
  emit('close')
}

const appDialog = ref({
  visible: false,
  title: '活动二维码',
  width: '600px',
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: '取消',
  submitText: '确认'
})

watch(
  () => appDialog.value.visible,
  (val: boolean) => {
    if (val) {
      radio.value = 1
    }
  }
)

// 素材保存得到的数据
const dialogSaveFun = (val: any) => {
  appDialog.value.visible = false
  
  emit('submit', { url: val.data[0].form_url || val.data[0].absolute_url || '', isCodeUrl: false })
}

// 素材保存得到的数据
const marketSaveFun = (val: any) => {
  appDialog.value.visible = false
  emit('submit', { url: val.list[0].qr_code_link || '', isCodeUrl: true })
}

defineExpose({ appDialog })
</script>

<style lang="scss" scoped>
.content {
  height: 132px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #33302d;
  line-height: 20px;
  display: flex;
  align-items: center;
  span {
    margin-right: 11px;
  }
}
</style>
